import React from 'react';
import { createModalContainer } from '../../../components/changeModal';
import {Button,Input,message,Form} from 'antd';
import styles from './index.less';

const FormItem = Form.Item;

class Component extends React.Component {
  constructor(props) {
      super(props);
      this.state = {}
  }

//   componentDidMount() {
//     this.props.form.validateFields();
// }

componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }

//取消
handleCancel =() => {
  this.props.cancel();
}


//提交
handleSubmit =e => {
  e.preventDefault();
  this.props.form.validateFieldsAndScroll(async (err, values) =>{
    const action = this.props.param.action;
    const name = values.name;
    const id = this.props.param.id;
    const data = {
        id,
        name
    }
        if(action ==='add') {
          if(!err) {
            this.props.ok(name);
          }
        } else {
            if(!err) {
              this.props.ok(data);
          }
        }
  })
}

    render() {
      const {getFieldDecorator} = this.props.form;
      const dataName = this.props.param.name;
      const formItemLayout = {
        labelCol: {
            span: 8 ,
          },
          wrapperCol: {
            span: 12 ,
          },
      }
        return (
          <Form onSubmit={this.handleSubmit}>
            <FormItem label="标签名称" {...formItemLayout} style={{marginTop: 24}}>
                {getFieldDecorator('name', {
                    initialValue: dataName,
                    rules: [
                        {required: true, message: '不能为空，最多6个字'},
                        {pattern: /^.{1,6}$/, message: '不能为空，最多6个字'}
                    ],
                    validateTrigger: 'onBlur',
                })(<Input autoFocus />)}
            </FormItem>
            <FormItem className={styles.footBtn}>
                <Button onClick={this.handleCancel} style={{marginRight: 16}}>
                    取消
                </Button>
                <Button
                    type="primary"
                    htmlType="submit"
                    loading={this.state.isFetching}
                >
                    保存
                </Button>
            </FormItem>
      </Form>
        )
    }
}

const AddLebal = createModalContainer(
    Form.create({})(Component),
    true,
    true
);

export default AddLebal;
